<!DOCTYPE html>
<html ng-app="sample-app" id="ng-app" class="js">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular directive: lazy image directive, inspired by TIF - toggle parent view</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- look inside this css to see how container and ratios work -->
    <link rel="stylesheet" type="text/css" href="lazy-image-style.css" />
    <!-- only for our sample demo app -->
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    
    <style>
        .hide-me { display: none; }
        .show-me {
            display: block;
        }
    </style>

</head>
<body ng-controller="appCtrl" >


<div class="demo-wrapper" >

    <h1>Angular lazy image directive</h1>
    <h2>Test: hide /show element</h2>
    

    <p>Directive works with ng-if, ng-include, $scope change and ui-views</p>

    <div ng-if="checked" style="display: inline-block; width: 30%;">
        <div afkl-lazy-image="//placehold.it/300x300/00a1de/ffffff" class="demo-no-use-of-aspect-ratio"></div>
    </div>

    <h2>TODO: the directive should also check if it is visible or not</h2>
    <p>When parent dom elements are simply set to hidden by css only the container itself will be there and then only triggered when triggering window scroll or resize.</p>

    <p>So the directive is not working if we apply hidden class on parent container and toggle it. So ng-show will not work as well since this sets styling simply to ng-hide</p>

    <div ng-show="checked" style="display: inline-block; width: 30%;">
        <div afkl-lazy-image="//placehold.it/320x320/00a1de/ffffff" class="demo-no-use-of-aspect-ratio"></div>
    </div>

    <div class="hide-me" ng-class="checked ? 'show-me' : 'hide-me'">
        <div afkl-lazy-image="//placehold.it/200x200/00a1de/ffffff" class="demo-no-use-of-aspect-ratio"></div>

        <ul class="demo-repeat-list">
            <li class="demo-repeat-list--items" ng-repeat="image in filtered =(collection | filter:{'type': searchText})">
                <span afkl-lazy-image="{{image.srcset}}" class="afkl-lazy-wrapper afkl-img-ratio-3-2"></span>
            </li>
        </ul>

    </div>


    <p>Directive is not working if we apply hidden class on parent container and toggle it. It will then only do recalculation when triggered (scrolling/resize event).</p>

    <div ng-show="checked" class="ng-hide">
        <div afkl-lazy-image="//placehold.it/100x100/00a1de/ffffff" class="demo-no-use-of-aspect-ratio"></div>

        <ul class="demo-repeat-list">
            <li class="demo-repeat-list--items" ng-repeat="image in filtered =(collection | filter:{'type': searchText})">
                <span afkl-lazy-image="{{image.srcset}}" class="afkl-lazy-wrapper afkl-img-ratio-3-2"></span>
            </li>
        </ul>

    </div>

    <input type="checkbox" value="true" ng-model="checked" checked="checked"/>
    
    Hide view: {{!checked}}

    <p><a href="index.html">back</a></p>

</div>

<!-- only dependency is Angular -->
<script src="vendor/angular.min.js"></script>
<!-- our ng lazy image module -->
<script src="lazy-image.js"></script>

<!-- dummy app kickstarting our module -->
<script src="js/app.js"></script>

</body>
</html>
